---
name: useDynamicList
route: /useDynamicList
menu: 'UI'
edit: false
sidebar: true
---

import { Playground } from 'docz';
import JackBox from 'jackbox';

import { useState, useMemo } from 'react';
import Demo1 from './demo/demo1';
import Demo1Tsx from '!raw-loader!./demo/demo1.tsx';
import Demo1Jsx from '!raw-loader!./demo/demo1.jsx';

import Demo2 from './demo/demo2';
import Demo2Tsx from '!raw-loader!./demo/demo2.tsx';
import Demo2Jsx from '!raw-loader!./demo/demo2.jsx';

import Demo3 from './demo/demo3';
import Demo3Tsx from '!raw-loader!./demo/demo3.tsx';
import Demo3Jsx from '!raw-loader!./demo/demo3.jsx';


# useDynamicList

A hook that helps you manage your list data and generate unique key for each item.

## Examples

### Default usage

<JackBox tsCode={Demo1Tsx} jsCode={Demo1Jsx} demoName='Default usage' description='a form that can add/remove fields dynamically'>
  <Demo1 />
</JackBox>

### Nesting form

<JackBox tsCode={Demo2Tsx} jsCode={Demo2Jsx} demoName='Nesting form' description='nesting dynamic form in a set of form groups'>
  <Demo2 />
</JackBox>

### Dyanmic table(draggable)

<JackBox tsCode={Demo3Tsx} jsCode={Demo3Jsx} demoName='Dyanmic table(draggable)' description='using antd table to build dynamic table form'>
  <Demo3 />
</JackBox>

## API

```typescript
const result: Result = useDynamicList(initialValue: T[]);
```

### Result

| Property | Description                                         | Type                 | Remarks  |
|--------------|--------------|----------------------|---------------|
| list      | current list data | T[]              | - |
| resetList  | reset list current data    | (list: T[]) => void;          | - |
| insert        | add item at specific position | (index: number, obj: T) => void                | - |
| merge         | merge items into specific position | (index: number, obj: T) => void | - |
| replace          | replace item at specific position         | (index: number, obj: T) => void          | - |
| remove   | delete specific item     | (index: number) => void;          | - |
| move | move item from old index to new index     | (oldIndex: number, newIndex: number) => void;          | - |
| getKey  | get the uuid of specific item    | (index: number) => number;           | - |
| getIndex  | retrieve index from uuid    | (key: number) => number;           | - |
| sortForm  | sort the form data(using with antd form)     | (list: unknown[]) => unknown[];           | see[`Dyanmic table(draggable)`](#dyanmic-tabledraggable) |
| push  | push new item at the end of list     | (obj: T) => void;          | - |
| pop  | remove the last item from the list     | () => void;          | - |
| unshift  | add new item at the front of the list    | (obj: T) => void;          | - |
| shift  | remove the first item from the list     | () => void;          | - |

### Params

| Property | Description                                                        | Type                   | Default |
|--------------|--------------|----------------------|---|
| initialValue      | initial value of the list | T[]              | -  |